/* === САМОСТОЯТЕЛЬНОЕ ПОДКЛЮЧЕНИЕ ШРИФТОВ === */

/* --- Creepster --- */
@font-face {
    font-family: 'Creepster'; /* Придумываем имя для использования в CSS */
    font-style: normal;
    font-weight: 400; /* Стандартный вес для Creepster */
    font-display: swap; /* Показываем запасной шрифт, пока грузится */
    src: url('fonts/creepster-v13-latin-regular.woff2') format('woff2'), /* Путь к твоему файлу WOFF2 */
         url('fonts/creepster-v23-latin-regular.woff') format('woff'); /* Путь к файлу WOFF (если есть) */
  }
  
  /* --- Roboto --- */
  /* Light 300 */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/roboto-v47-latin-regular.woff2') format('woff2'),
  }
  /* Regular 400 */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-v47-latin-regular.woff2') format('woff2'),  
}
  /* Bold 700 */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/roboto-v47-latin-regular.woff2') format('woff2'),
         url('fonts/roboto-v30-cyrillic-ext_latin-ext-700.woff') format('woff');
  }
  
  /* === КОНЕЦ ПОДКЛЮЧЕНИЯ === */
  
  /* --- Дальше идут твои обычные стили --- */
  * { margin: 0; /* ... */ }
  body { font-family: 'Roboto', sans-serif; /* Используем имя, заданное в @font-face */ }
  h1, h2, h3, h4, h5, h6 { font-family: 'Creepster', cursive; /* Используем имя, заданное в @font-face */ }
  .cta-button { font-family: 'Creepster', cursive; }
  /* и т.д. */

/* --- Базовые стили и сброс --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Плавная прокрутка по якорям */
}

body {
    font-family: 'Roboto', sans-serif; /* Базовый читаемый шрифт */
    background-color: #000; /* Фоновый цвет на случай, если видео не загрузится */
    color: #e0e0e0; /* Светлый цвет текста для контраста */
    line-height: 1.6;
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
    position: relative; /* Нужно для z-index */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Creepster', cursive; /* Жуткий шрифт для заголовков */
    color: #b71c1c; /* Темно-красный акцентный цвет */
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-weight: normal; /* Creepster сам по себе жирный */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 1.8rem; color: #ffcdd2; } /* Чуть светлее для подзаголовков */

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 300;
}

a {
    color: #e57373; /* Светло-красный для ссылок */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ef9a9a;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* Чтобы контент был над фоном */
    z-index: 2;
}

/* --- Фоновое видео --- */
.background-video-container {
    position: fixed; /* Фиксируем на весь экран */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Позади всего контента */
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%); /* Центрирование видео */
    object-fit: cover; /* Масштабирование с сохранением пропорций */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Затемнение (можно настроить) */
    z-index: 1;
}

/* --- Шапка --- */
#main-header {
    position: fixed; /* Фиксированная шапка */
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.8); /* Полупрозрачный темный фон */
    backdrop-filter: blur(5px); /* Эффект размытия фона под шапкой (не везде поддерживается) */
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 0;
    z-index: 1000; /* Поверх всего, кроме моб. меню */
    border-bottom: 1px solid #b71c1c; /* Красная линия снизу */
    box-shadow: 0 2px 10px rgba(183, 28, 28, 0.3);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 2.2rem;
    margin-bottom: 0;
    color: #f5f5f5; /* Белый цвет для лого */
    text-shadow: 2px 2px 5px rgba(183, 28, 28, 0.8);
    user-select: none;
}

.logo .scary-l, .logo .scary-s {
    color: #b71c1c; /* Красные буквы */
    font-size: 2.6rem; /* Чуть больше */
    display: inline-block;
    transform: rotate(-5deg); /* Небольшой наклон для эффекта */
    animation: flicker 3s infinite alternate; /* Эффект мерцания */
}
.logo .scary-s {
    transform: rotate(3deg);
    animation-delay: 0.5s;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
        0 0 4px #b71c1c,
        0 0 11px #b71c1c,
        0 0 19px #b71c1c,
        0 0 40px #b71c1c,
        0 0 80px #b71c1c,
        0 0 90px #b71c1c,
        0 0 100px #b71c1c,
        0 0 150px #b71c1c;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.8;
   }
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    color: #e0e0e0;
    font-size: 1.1rem;
    padding: 5px 10px;
    position: relative;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #b71c1c;
    transition: width 0.4s ease;
    -webkit-transition: width 0.4s ease;
}

.main-nav a:hover {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 8px #e57373;
}

.main-nav a:hover::after {
     width: 100%;
     left: 0;
     background-color: #e57373;
}

/* --- Кнопка Бургер-меню --- */
.menu-toggle {
    display: none; /* Скрыто по умолчанию */
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1001; /* Поверх шапки */
    transition: color 0.3s ease;
}
.menu-toggle:hover {
    color: #e57373;
}

/* --- Мобильное меню --- */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Скрыто за экраном */
    width: 70%;
    max-width: 300px;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1050; /* Поверх всего */
    transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Плавный выезд */
    display: flex;
    flex-direction: column;
    padding: 80px 30px 30px; /* Отступ сверху для кнопки закрытия */
    border-left: 2px solid #b71c1c;
    box-shadow: -5px 0px 15px rgba(183, 28, 28, 0.4);
}

.mobile-menu.active {
    right: 0; /* Показываем меню */
}

.mobile-menu nav ul {
    list-style: none;
}

.mobile-menu nav li {
    margin-bottom: 20px;
}

.mobile-menu nav a {
    color: #e0e0e0;
    font-size: 1.4rem;
    display: block;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(229, 115, 115, 0.3);
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.mobile-menu nav a:hover {
    color: #fff;
    background-color: rgba(183, 28, 28, 0.2);
    text-decoration: none;
    padding-left: 10px;
    border-bottom-color: #e57373;
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}
.close-menu:hover {
    color: #b71c1c;
    transform: rotate(90deg);
}

/* --- Секция Hero --- */
.hero-section {
    min-height: 100vh; /* Высота первого экрана */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* Отступ от шапки */
    position: relative;
    z-index: 2;
}

.hero-content h2 {
    font-size: 4.5rem;
    color: #f5f5f5;
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out;
}

.hero-content p {
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: fadeInUp 1s ease-out 0.5s;
    animation-fill-mode: backwards; /* Начинает анимацию с невидимого состояния */
}

/* --- Кнопки CTA --- */
.cta-button {
    display: inline-block;
    background-color: #b71c1c; /* Темно-красный */
    color: #fff;
    padding: 15px 35px;
    font-family: 'Creepster', cursive;
    font-size: 1.6rem;
    letter-spacing: 1px;
    border: 2px solid #b71c1c;
    border-radius: 5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px rgba(183, 28, 28, 0.5), 0 0 20px rgba(183, 28, 28, 0.3);
}

.cta-button:hover {
    background-color: #e57373; /* Светлее при наведении */
    border-color: #e57373;
    color: #111;
    text-decoration: none;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(229, 115, 115, 0.7), 0 0 30px rgba(229, 115, 115, 0.5);
    animation: none; /* Отключаем пульсацию при наведении */
}

.large-cta {
    font-size: 1.8rem;
    padding: 18px 45px;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(183, 28, 28, 0.5), 0 0 20px rgba(183, 28, 28, 0.3); }
    50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(183, 28, 28, 0.7), 0 0 30px rgba(183, 28, 28, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(183, 28, 28, 0.5), 0 0 20px rgba(183, 28, 28, 0.3); }
}

/* --- Общие стили для секций контента --- */
.content-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
    background-color: rgba(10, 10, 10, 0.85); /* Полупрозрачный фон для секций */
    margin-top: -1px; /* Небольшой хак для перекрытия границ */
    border-top: 1px solid rgba(183, 28, 28, 0.3);
    border-bottom: 1px solid rgba(183, 28, 28, 0.3);
}

.content-section:nth-child(odd) { /* Чередование фона для разнообразия */
     background-color: rgba(15, 15, 15, 0.9);
}

/* --- Секция "О Нас" (Flexbox) --- */

.about-heading {
    margin-bottom: -0.3rem; /* ===> УМЕНЬШЕННЫЙ ОТСТУП <=== */
}

/* Используем Flexbox для выравнивания текста и картинки */
.about-flex {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 40px;          /* Пространство между текстом и картинкой */
}

/* Текстовый блок */
.about-text {
    flex: 1; /* Занимает доступное пространство */
}

/* Контейнер для ОДНОЙ картинки */
.about-image {
    flex-basis: 400px; /* Фиксированная ширина для блока с картинкой */
    max-width: 400px;  /* Ограничение ширины */
    flex-shrink: 0;    /* Запрещаем сжиматься */
}

/* Стили для картинки */
.about-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid #b71c1c; /* Рамка */
    box-shadow: 0 0 15px rgba(183, 28, 28, 0.5); /* Тень */
    filter: grayscale(30%) contrast(1.1); /* Фильтр */
    transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease; /* Плавность */
    border-radius: 8px;     /* Скругление углов */
}

.about-image img:hover {
    transform: scale(1.03); /* Увеличение */
    filter: grayscale(0%) contrast(1); /* Убираем фильтр */
    box-shadow: 0 0 20px rgba(229, 115, 115, 0.7); /* Усиленная тень */
}

/* --- Адаптивность для секции "О нас" (Flexbox) --- */
@media (max-width: 768px) {
    .about-heading {
         margin-bottom: 0.5rem; /* На мобильных можно оставить чуть больше */
    }
    .about-flex {
        flex-direction: column; /* Ставим элементы друг под друга */
        align-items: center;   /* Центрируем по горизонтали */
        gap: 30px;             /* Уменьшаем отступ */
    }

    .about-image {
        flex-basis: auto; /* Автоматическая высота/ширина */
        width: 90%;       /* Ширина картинки на мобильных */
        max-width: 450px; /* Ограничиваем */
    }
     .about-text {
        width: 100%; /* Текст занимает всю ширину */
        text-align: center; /* Можно отцентрировать текст на мобильных */
    }
}
/* --- Конец стилей для секции "О Нас" --- */

/* --- Секция "Карта" --- */
/* ... ваши стили для карты ... */

/* --- Секция "Бронирование" --- */
/* ... ваши стили для бронирования ... */

/* и т.д. */

/* --- ПОСЛЕДНИЕ ОБЩИЕ МЕДИА-ЗАПРОСЫ --- */
/* Убедитесь, что в этих блоках НЕТ правил для .about-flex или .about-images-column */
@media (max-width: 768px) {
    /* ... ОБЩИЕ стили для 768px (БЕЗ .about-flex и .about-images-column) ... */
    h1 { font-size: 2.8rem; }
    .logo h1 { font-size: 1.8rem; }
    /* ... и т.д. ... */
    .main-nav { display: none; }
    .menu-toggle { display: block; }
    .video-grid { grid-template-columns: 1fr; gap: 40px; }
    /* ... и т.д. ... */
}
@media (max-width: 480px) {
     /* ... ОБЩИЕ стили для 480px (БЕЗ .about-flex и .about-images-column) ... */
    .container { padding: 0 15px; }
     /* ... и т.д. ... */
}
                                               /* --- Секция "Карта" --- */
/* --- Секция "Карта" --- */
.map-section {
    text-align: center; /* Центрирует заголовок и параграф над картой */
}

/* Основной контейнер для карты, использующий стили плейсхолдера */
.map-placeholder {
    height: 400px;                      /* Фиксированная высота контейнера */
    background-color: #222;             /* Темный фон */
    border: 2px dashed #b71c1c;         /* Пунктирная красная рамка */
    margin-top: 2rem;                   /* Отступ сверху */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); /* Внутренняя тень */
    position: relative;                 /* Для позиционирования iframe и ссылок */
    overflow: hidden;                   /* Обрезает все выходящее за рамки */
    padding: 0;                         /* Убирает внутренние отступы */
}

/* Стили для iframe карты ВНУТРИ .map-placeholder */
.map-placeholder iframe {
    display: block;                     /* Убирает лишние отступы */
    width: 100%;                        /* Ширина на весь контейнер */
    height: 100%;                       /* Высота на весь контейнер */
    border: none;                       /* Убирает собственную рамку iframe */
    position: absolute;                 /* Позиционируем внутри .map-placeholder */
    top: 0;
    left: 0;

    /* Фильтры для придания красноватого оттенка и затемнения */
    filter: brightness(80%)             /* Яркость */
            contrast(95%)               /* Контрастность */
            grayscale(20%)              /* Обесцвечивание */
            sepia(80%)                  /* Красновато-коричневый оттенок */
            hue-rotate(340deg);         /* Сдвиг цветов к красному */

    transition: filter 0.3s ease;       /* Плавный переход */
}

/* Стили для ссылок Яндекса поверх карты */
.map-placeholder a {
    color:#ee1313;                         /* Цвет текста */
    font-size:12px;                     /* Размер шрифта */
    position:absolute;                  /* Позиционируем поверх карты */
    z-index:1;                          /* Слой над iframe */
    background: rgba(213, 27, 27, 0.5);        /* Полупрозрачный фон для читаемости */
    padding: 2px 4px;                   /* Внутренние отступы */
    border-radius: 5px;                 /* Скругление углов */
    text-decoration: none;              /* Убираем подчеркивание */
    transition: background-color 0.2s ease, color 0.2s ease; /* Плавность */
}
/* Позиционирование первой ссылки (название организации) */
.map-placeholder a:nth-of-type(1) {
    top:8px;
    left:8px;
}
/* Позиционирование второй ссылки (категория/город) */
.map-placeholder a:nth-of-type(2) {
    top: 28px; /* Чуть ниже первой */
    left: 8px;
}
/* Стиль ссылок при наведении */
.map-placeholder a:hover {
    background-color: rgba(183, 28, 28, 0.7); /* Красный фон */
    color: #a20505 !important;             /* Белый текст */
}

/* --- Секция "Бронирование" --- */
.booking-section {
    text-align: center;
}

.warning-text {
    margin-top: 2rem;
    color: #ffcdd2; /* Светло-красный для предупреждения */
    font-style: italic;
    font-size: 1rem;
}

/* --- Секция "Видео Галерея" --- */
.video-gallery-section h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Адаптивная сетка */
    gap: 30px;
}

.video-wrapper {
    background-color: #111;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(183, 28, 28, 0.3);
    border-color: #b71c1c;
}

.video-wrapper h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #333;
}

/* --- Подвал --- */
#main-footer {
    background-color: #0a0a0a;
    color: #888;
    padding: 30px 0;
    text-align: center;
    position: relative;
    z-index: 2;
    border-top: 2px solid #b71c1c;
    margin-top: -1px; /* Перекрытие */
}

.social-links {
    margin: 15px 0;
}

.social-links a {
    color: #888;
    font-size: 1.8rem;
    margin: 0 12px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #e57373;
    transform: scale(1.2);
    text-decoration: none;
}

#main-footer p {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

/* --- Анимации (примеры) --- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Медиа-запросы для адаптивности --- */
@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }
    .logo h1 { font-size: 1.8rem; }
    .logo .scary-l, .logo .scary-s { font-size: 2.1rem; }
    h2 { font-size: 2.2rem; }
    .hero-content h2 { font-size: 3.5rem; }
    .hero-content p { font-size: 1.2rem; }

    .main-nav {
        display: none; /* Скрываем основное меню на мобильных */
    }

    .menu-toggle {
        display: block; /* Показываем бургер */
    }


    .video-grid {
        grid-template-columns: 1fr; /* Видео друг под другом */
        gap: 40px;
    }

    .cta-button {
        padding: 12px 28px;
        font-size: 1.4rem;
    }
    .large-cta {
        font-size: 1.6rem;
        padding: 15px 35px;
    }
}

@media (max-width: 480px) {
    .container { padding: 0 15px; }
    h1 { font-size: 2.2rem; }
    .logo h1 { font-size: 1.5rem; }
    .logo .scary-l, .logo .scary-s { font-size: 1.8rem; }
    h2 { font-size: 1.9rem; }
    .hero-content h2 { font-size: 2.8rem; }
    .hero-content p { font-size: 1.1rem; }

    .mobile-menu {
        width: 85%;
    }

     .cta-button {
        padding: 10px 20px;
        font-size: 1.2rem;
    }
    .large-cta {
        font-size: 1.4rem;
        padding: 12px 28px;
    }
    .social-links a {
        font-size: 1.6rem;
        margin: 0 8px;
    }
}